<template>
    <div class="brand">
        <h3 class="title">人气推荐</h3>
        <van-card v-for="item in hotGoodsList" :key="item.id" :desc="item.goods_brief" :title="item.name" :thumb="item.list_pic_url" :price="item.retail_price" />
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {},
        props: ["hotGoodsList"]
    }
</script>

<style lang="less" scoped>
    .brand {
        background-color: #fff;
        margin-top: .2rem;
        margin-bottom: .2rem;

        .title {
            text-align: center;
            height: .5rem;
            line-height: .5rem;
            font-size: .2rem;
        }

        .van-grid-item {
            position: relative;
            text-align: center;

            img {
                height: 120%;
                width: 110%;
            }

            h4 {
                width: 90%;
                text-align: center;
                color: #333;
                font-size: 12px;
            }

            p {
                display: block;
                width: 90%;
                margin-top: .1rem;
                color: #8b0000;
                font-size: 12px;
            }
        }
    }
    .van-card__title {
        font-size: .18rem;
        margin: 10px 0;   
    }
    .van-card__price-currency{
        color: #8b0000;
    }
    .van-card__price-integer{
        color: #8b0000;
        margin-left: .05rem;
    }

</style>